<div style="background-color: lightskyblue; max-width: 1800px">
  <div style="display: inline-block; width: 78px">
    <button
      type="button"
      style="height: 20px; width: 20px; padding: 0"
      (click)="showConditionList()"
    >
      +
    </button>
  </div>

  <div style="display: inline-block; width: 10%; margin-left: 10px">
    {{ store.currentLanguage.relation }}
  </div>
  <div style="display: inline-block; width: 20%; margin-left: 10px">
    {{ store.currentLanguage.show }}
  </div>

  <!-- <span style="display: inline-block; width: 25%; text-align: center;"
    >Target</span
  > -->

  <div style="display: inline-block; width: 15%; margin-left: 10px">
    {{ store.currentLanguage.operate }}
  </div>

  <div style="display: inline-block; width: 37%; margin-left: 10px">
    {{ store.currentLanguage.value }}
  </div>
  <div style="display: inline-block; width: 8%; margin-left: 10px">
    {{ store.currentLanguage.public }}
  </div>
</div>
<dx-popup
  [width]="1290"
  [height]="650"
  [showTitle]="true"
  title="{{ store.currentLanguage.select }}"
  [dragEnabled]="false"
  [closeOnOutsideClick]="true"
  [(visible)]="showlist"
>
  <div>
    <app-querytarget [(currentlist)]="selectConditions"></app-querytarget>
    <div style="text-align: center; margin-top: 5px">
      <button (click)="selctItems()">{{ store.currentLanguage.ok }}</button>
      <button (click)="cancelItems()">
        {{ store.currentLanguage.cancel }}
      </button>
    </div>
  </div>
</dx-popup>

<div
  class="activeElement"
  style="margin: 2px; height: 37px"
  *ngFor="let item of currentlist"
>
  <div id="row">
    <div style="display: inline-block; width: 78px">
      <button
        type="button"
        style="height: 20px; width: 20px; padding: 0"
        (click)="moveup(item)"
      >
        ▲
      </button>
      <button
        type="button"
        style="height: 20px; width: 20px; padding: 0"
        (click)="movedown(item)"
      >
        ▼
      </button>
      <button
        type="button"
        style="height: 20px; width: 20px; padding: 0"
        (click)="remove(item)"
      >
        −
      </button>
    </div>

    <div
      style="
        display: inline-block;
        width: 10%;
        text-align: left;
        margin-left: 5px;
      "
    >
      <select [(ngModel)]="item.Relation" style="top: -10px">
        <option value="And">And</option>
        <option value="Or">Or</option>
        <option value="Not">Not</option>
      </select>
    </div>

    <div
      style="
        display: inline-block;
        width: 20%;
        text-align: left;
        margin-left: 5px;
      "
    >
      <input *ngIf="showSelect" type="checkbox" [(ngModel)]="item.IsShow" />
      {{ item.Show }}
    </div>

    <div
      style="
        display: inline-block;
        width: 15%;
        text-align: left;
        margin-left: 5px;
      "
    >
      <select [(ngModel)]="item.Operation">
        <option
          *ngIf="dataService.validOperation(item.DataType, 'Eq')"
          value="Eq"
        >
          &#61;
        </option>

        <option
          *ngIf="dataService.validOperation(item.DataType, '>')"
          value=">"
        >
          &gt;
        </option>
        <option
          *ngIf="dataService.validOperation(item.DataType, '<')"
          value="<"
        >
          &lt;
        </option>
        <option
          *ngIf="dataService.validOperation(item.DataType, '>=')"
          value=">="
        >
          &gt;&#61;
        </option>
        <option
          *ngIf="dataService.validOperation(item.DataType, '<=')"
          value="<="
        >
          &lt;&#61;
        </option>
        <option
          *ngIf="dataService.validOperation(item.DataType, 'in')"
          value="in"
        >
          in
        </option>
        <option
          *ngIf="dataService.validOperation(item.DataType, 'between')"
          value="between"
        >
          between
        </option>
        <option
          *ngIf="dataService.validOperation(item.DataType, 'pre')"
          value="pre"
        >
          {{ store.currentLanguage.pre }}
        </option>
        <option
          *ngIf="dataService.validOperation(item.DataType, 'pst')"
          value="pst"
        >
          {{ store.currentLanguage.pst }}
        </option>
        <option
          *ngIf="dataService.validOperation(item.DataType, 'emptywild')"
          value="emptywild"
        >
          {{ store.currentLanguage.wildcard }}
        </option>
        <option
          *ngIf="dataService.validOperation(item.DataType, 'empty')"
          value="empty"
        >
          {{ store.currentLanguage.empty }}
        </option>
        <option
          *ngIf="dataService.validOperation(item.DataType, 'notempty')"
          value="notempty"
        >
          {{ store.currentLanguage.notempty }}
        </option>
        <option
          *ngIf="dataService.validOperation(item.DataType, 'asyp')"
          value="asyp"
        >
          {{ store.currentLanguage.asyncparallel }}
        </option>
      </select>
    </div>

    <div
      style="
        display: inline-block;
        width: 37%;
        text-align: left;
        white-space: nowrap;
      "
    >
      <input
        *ngIf="item.DataType === '' || item.DataType === 'str'"
        type="text"
        [(ngModel)]="item.Value"
      />
      <button
        *ngIf="item.DicTable != '' || item.Options.length > 0"
        (click)="openselect(item)"
      >
        {{ store.currentLanguage.select }}
      </button>
      <input
        type="number"
        *ngIf="item.DataType === 'num'"
        [(ngModel)]="item.Value"
      />
      <input
        type="date"
        *ngIf="item.DataType === 'date'"
        [(ngModel)]="item.Value"
      />
      <span *ngIf="item.Operation === 'between'">-and-</span>
      <input
        *ngIf="
          (item.DataType === '' || item.DataType === 'str') &&
          item.Operation === 'between'
        "
        type=" text"
        [(ngModel)]="item.AddtionalValue"
      />
      <input
        type="number"
        *ngIf="item.DataType === 'num' && item.Operation === 'between'"
        [(ngModel)]="item.AddtionalValue"
      />
      <input
        type="date"
        *ngIf="item.DataType === 'date' && item.Operation === 'between'"
        [(ngModel)]="item.AddtionalValue"
      />

      <button
        *ngIf="
          (item.DicTable != '' || item.Options.length > 0) &&
          item.Operation === 'between'
        "
        (click)="openadditionselect(item)"
      >
        {{ store.currentLanguage.select }}
      </button>
    </div>
    <div style="width: 8%; display: inline-block; margin-left: 5px">
      <input type="checkbox" [(ngModel)]="item.Public" />
    </div>
  </div>
  <div>
    <hr style="color: lightgoldenrodyellow; opacity: 0.35" />
  </div>
</div>

<dx-popup
  [width]="1290"
  [height]="650"
  [showTitle]="true"
  title="{{ store.currentLanguage.select }}"
  [dragEnabled]="false"
  [closeOnOutsideClick]="true"
  [(visible)]="showselect"
>
  <div>
    <dx-drop-down-box
      [(value)]="selectitemValue"
      placeholder="Select a value..."
      [showClearButton]="true"
      [dataSource]="dic"
    >
      <div *dxTemplate="let data of 'content'">
        <dx-data-grid
          [dataSource]="dic"
          [selection]="{ mode: 'multiple' }"
          [columns]="currentShowColumn"
          [hoverStateEnabled]="true"
          [paging]="{ enabled: true, pageSize: 20 }"
          [filterRow]="{ visible: true }"
          [scrolling]="{ mode: 'infinite' }"
          [height]="355"
          [(selectedRowKeys)]="selectitemValue"
        >
        </dx-data-grid>
      </div>
    </dx-drop-down-box>
    <div style="text-align: center; margin-top: 500px">
      <button (click)="selectValues()">
        {{ store.currentLanguage.ok }}
      </button>
      <button (click)="showselect = false">
        {{ store.currentLanguage.cancel }}
      </button>
    </div>
  </div>
</dx-popup>
